<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-20 11:33:50
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 15:53:00
-->
<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-20 10:16:02
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-13 16:45:38
-->
<template>
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="managerOfAuth"
    :pagination="state.pagination"
    :loading="state.loading"
    @change="handleTableChange"
  >
  </a-table>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { TableProps } from "ant-design-vue";
import { selectAllByPage } from "@/api/system/auth";
import { paginationToQuery } from "@/utils/common";
const columns = [
  {
    dataIndex: "id",
    title: "ID",
    key: "id",
    align: "center",
  },
  {
    dataIndex: "authName",
    title: "权限名称",
    key: "authName",
    align: "center",
  },
  {
    dataIndex: "authCode",
    title: "权限代码",
    key: "authCode",
    align: "center",
  },
];
const state = reactive({
  loading: true,
  pagination: {
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total) => `总${total}条`,
  },
});
const managerOfAuth = ref<API.AuthItem[]>();

/**
 * 获取数据
 */
const loadData = async () => {
  const { seachList, seachTotal } = await selectAllByPage(
    paginationToQuery(state.pagination)
  );
  managerOfAuth.value = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

/**
 * 切换分页
 * @param page
 */
const handleTableChange: TableProps["onChange"] = (page) => {
  state.pagination.current = page.current!;
  loadData();
};

onMounted(() => {
  loadData();
});
</script>
<style lang="less" scoped></style>
